<template>
  <div class="header">
    <div class="title">
      <slot></slot>
    </div>
  </div>
  <liveTime/>
  <!--  <div id="curr_time"-->
  <!--       style="-->
  <!--   font-size: 2rem;-->
  <!--   z-index: 100;-->
  <!--   position: absolute;-->
  <!--   top: -7px;-->
  <!--   right: 10px">-->
  <!--    {{ currTime }}-->
  <!--  </div>-->
</template>

<script setup lang="ts">
import {onMounted, reactive} from 'vue'
import liveTime from './timeline.vue'

const state = reactive({
  isHide: false,
  currTime: '',
})
onMounted(() => {
  // setInterval(() => {
  //   currTime = new Date().toLocaleString()
  //   document.getElementById('curr_time').innerHTML = currTime.toLocaleString()
  // }, 100)
})

// function hieddle(e) {
//   isHide.value = !isHide.value
//   // let l = document.getElementsByClassName('layout-content-left')
//   // 获取所有具有指定类的元素
//   var elements = document.getElementsByClassName('panel')
//
//   // 遍历集合并设置样式
//   for (var i = 0; i < elements.length; i++) {
//     elements[i].style.display = isHide.value ? 'none' : 'block' // 例如，将背景颜色设置为黄色
//   }
// }
</script>

<style>
.header {
  cursor: pointer;
  position: absolute;
  top: -2px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 12rem;
  background: url('/yj/header/header_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 4rem;
}

.title {
  position: absolute;
  top: 5px;
  font-size: 35px;
  color: white;
}

.title:hover {
  font-size: 40px;
  transition: font-size 0.5s ease;
}
</style>
